<template>
  <view class="userpost">
    <view class="userpost-index">
      <view class="userpost-item">
        <view class="userpost-top">
        <radio :checked="postItem.isSelected" color="#FFCA46" v-if="showRadio" @click="radioClickHandler"></radio>
          <text>{{postItem.title}}</text>
          <text style="color: #58C66A;" v-if="postItem.num === postItem.currentNum">组队成功</text>
          <text style="color: #CD1225;" v-else-if="postItem.isOverdue === 1">组队失败</text>
          <text style="color: #FF7418;" v-else="postItem">组队中</text>
        </view>
        <view class="userpost-body" @click="gotoItem">
          <view class="userpost-bodyitem">
            <text>需要人数</text>
            <text class="userpost-bodyitemright">{{postItem.num}}</text>
          </view>
          <view class="userpost-bodyitem">
            <text>主要内容</text>
            <text class="userpost-bodyitemright">{{postItem.content}}</text>
          </view>
          <view class="userpost-bodyitem">
            <text>活动地点</text>
            <text class="userpost-bodyitemright">{{postItem.address}}</text>
          </view>
          <view class="userpost-bodyitem">
            <text>活动开始时间</text>
            <text class="userpost-bodyitemright">{{postItem.beginTime}}</text>
          </view>
        </view>      
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"user-post",
    data() {
      return {
        
      };
    },
    props: {
      postItem: {
        type: Object,
        default: {}
      },
      showRadio: {
        type: Boolean,
        default: false
      }
    },
    methods:{
      radioClickHandler() {
        this.$emit('radio-change',{
          isSelected: !this.postItem.isSelected,
          serialNumber: this.postItem.serialNumber
        })
      },
      gotoItem() {
        this.$emit('goto-item',this.postItem.serialNumber)
      }
    }
  }
</script>

<style lang="scss">
  .userpost {
    // background-color: #00BFFF;
  }
  .userpost-index {
    background-color: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #FFFFFF;
    margin: 30rpx 20rpx 0 20rpx;
    .userpost-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .userpost-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 5px;
        border-bottom: 1px solid #FFFFFF;
      }
      .userpost-body {
        text {
          font-size: 14px;
        }
        .userpost-bodyitem {
          padding: 5px 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .userpost-bodyitemright {
            display: inline-block;
            width: 140px;
            //省略...显示
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
</style>
